<!--
 * @Author: your name
 * @Date: 2019-11-19 10:18:29
 * @LastEditTime: 2019-11-20 21:50:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \YouYouFo\you-you-go\src\views\pictureShare\PicDetail.vue
 -->
<template>
  <div class="app">
    <h5>{{picturesInfo.title}}</h5>
    <van-cell value="点击:0" is-link>
      <!-- 使用 title 插槽来自定义标题 -->
      <template slot="title">
        <!-- $moment(item.add_time).format("YYYY-MM-DD") -->
        <span
          class="custom-title"
        >发表时间:{{$moment(picturesInfo['add_time']).format("YYYY-MM-DD")}}</span>
      </template>
    </van-cell>
    <hr />
    <ul>
      <li v-for="(item,index) in pictureShuzu" :key="index" class="pictureShu">
        <img :src="item.src" @click="showPicture(index)" />
      </li>
    </ul>
    <div class="info">{{picturesInfo.content}}</div>
    <commentsC :getCommentFun="getcomments" :postCommentFun="postcomment" :viId="43" :pageIndex="1"></commentsC>
  </div>
</template>
           
<script>
// 图片预览
import { ImagePreview } from 'vant'
import { getcomments, postcomment, getImages, getimageInfo, getthumimages } from '@/api/index'
import commentsC from '@/common/YoviComment'
import { log } from 'util'
export default {
  data() {
    return {
      getcomments,
      postcomment,
      // 图片列表所有
      pictureList: [],
      // 点击的索引
      index: 0,
      // 获取图片数组
      pictureShuzu: [],
      // 传入的图片的id
      ids: 0,
      // 预览图片的数组
      showPictures: [],
      // 图片info
      picturesInfo: [],
    }
  },
  created() {
    // 接收点击传过来的索引,id
    const inx = Number(window.sessionStorage.getItem('index'))
    const id = Number(window.sessionStorage.getItem('ID'))
    this.index = inx
    // console.log(this.index, 5555555555)
    this.ids = id
    // console.log(this.ids, 6666666666666)
    // 图片分享的五个数组
    this.shuzu(this.ids)
    // 图片info
    this.pictureIfon(this.ids)
    // console.log(this.pictureList,111111111)
  },
  methods: {
    // 图片预览
    showPicture(indexs) {
      console.log(indexs)
      for (let i in this.pictureShuzu) {
        if (this.showPictures.length !== this.pictureShuzu.length) {
          this.showPictures.push(this.pictureShuzu[i].src)
        }
      }
      // console.log(this.showPictures)
      ImagePreview({
        images: this.showPictures,
        startPosition: indexs
      })
    },
    // 图片分享详情中的缩略图数组
    async shuzu(idd) {
      // console.log(idd)
      const { data: res } = await getthumimages(idd)
      this.pictureShuzu = res.message
      // console.log(this.pictureShuzu)
    },
    // 图片点击信息
    async pictureIfon(ID) {
      const { data: res } = await getimageInfo(ID)
       console.log(res)
      this.picturesInfo = res.message[0]
    }
  },
  // 挂载评论组件
  components: {
    commentsC
  }
  // 获取点击图片的索引
}
</script>
<style lang="less" scoped>
h5 {
  text-align: center;
  font-size: 16px;
  color: #26a2ff;
  margin: 4px, 0;
}
.app {
  padding: 5px;
}
ul {
  overflow: hidden;
}
.pictureShu {
  width: 30%;
  // height: 196px;
  float: left;
  margin: 5px;
  box-shadow: 5px 5px 5px #888888;
  img {
    width: 100%;
    height: 100%;
  }
}
.info {
  font-size: 15px;
  margin: 10px;
}
</style>
